<!DOCTYPE html>
<html>
    <head>
        <title>Sample app</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/fhir-js-client@1.0.0/dist/fhir-client.min.js"></script>
    </head>
    <body>
    
    <div class="container">
        <h1>Microsoft FHIR Server SMART on FHIR Sample App</h1>

        <div class="row">
            <h2>Patient Resource</h2>
            <textarea id="patientfield" style="width: 20cm; height: 5cm;"></textarea>
        </div>

        <div class="row">
            <h2>Token Response</h2>
            <textarea id="tokenresponsefield" style="width: 20cm; height: 5cm;"></textarea>
        </div>
    </div>

    <script type="text/javascript">
        function log(txt) {
            document.getElementsByTagName("pre")[0].innerText += txt + "\n";
        }

        FHIR.oauth2.ready(function(client) {
            $.when(client.patient.read()).then(
                function(patient){
                    $('#patientfield').val(JSON.stringify(patient, null, 4));
                    $('#tokenresponsefield').val(JSON.stringify(client.tokenResponse, null, 4));
                },
                function(error){
                    console.log("Error:\n" + error);
                }
            );
        });
    </script>

    </body>
</html>